import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { CheckIcon, MoonIcon, ResetIcon, SunIcon } from '@radix-ui/react-icons';
import { Paintbrush } from 'lucide-react';
import { cn } from '@/lib/utils';
import { ThemeWrapper } from '@/components/theme-wrapper';
import { Button } from '@/components/ui/button';
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Skeleton } from '@/components/ui/skeleton';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { themes } from '@/types/themes';
import appStore from '@/store/app';

export const ThemeCustomizer = observer(() => {
    const [mounted, setMounted] = React.useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    return (
        <div className='flex items-center space-x-2'>
            <Drawer>
                <DrawerTrigger asChild>
                    <Button variant='outline' className='md:hidden'>
                        <Paintbrush className='mr-2 h-4 w-4' />
                    </Button>
                </DrawerTrigger>
                <DrawerContent className='p-6 pt-0'>
                    <Customizer />
                </DrawerContent>
            </Drawer>
            <div className='hidden md:flex'>
                <div className='mr-2 hidden items-center space-x-0.5 lg:flex'>
                    {mounted ? (
                        <>
                            {['rose', 'blue', 'green', 'orange'].map((color) => {
                                const theme = themes.find((theme: any) => theme.name === color);
                                const isActive = appStore.config.theme === color;

                                if (!theme) {
                                    return null;
                                }

                                return (
                                    <Tooltip key={theme.name}>
                                        <TooltipTrigger asChild>
                                            <button
                                                type='button'
                                                onClick={() =>
                                                    appStore.setConfig({
                                                        ...appStore.config,
                                                        theme: theme.name,
                                                    })
                                                }
                                                className={cn(
                                                    'flex h-9 w-9 items-center justify-center rounded-full border-2 text-xs',
                                                    isActive ? 'border-[--theme-primary]' : 'border-transparent',
                                                )}
                                                style={
                                                    {
                                                        '--theme-primary': `hsl(${theme?.activeColor[appStore.mode === 'dark' ? 'dark' : 'light']})`,
                                                    } as React.CSSProperties
                                                }
                                            >
                                                <span
                                                    className={cn(
                                                        'flex h-6 w-6 items-center justify-center rounded-full bg-[--theme-primary]',
                                                    )}
                                                >
                                                    {isActive && <CheckIcon className='h-4 w-4 text-white' />}
                                                </span>
                                                <span className='sr-only'>{theme.label}</span>
                                            </button>
                                        </TooltipTrigger>
                                        <TooltipContent
                                            align='center'
                                            className='rounded-[0.5rem] bg-zinc-900 text-zinc-50'
                                        >
                                            {theme.label}
                                        </TooltipContent>
                                    </Tooltip>
                                );
                            })}
                        </>
                    ) : (
                        <div className='mr-1 flex items-center gap-4'>
                            <Skeleton className='h-6 w-6 rounded-full' />
                            <Skeleton className='h-6 w-6 rounded-full' />
                            <Skeleton className='h-6 w-6 rounded-full' />
                            <Skeleton className='h-6 w-6 rounded-full' />
                        </div>
                    )}
                </div>
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant='outline'
                            className='flex h-9 w-9 items-center justify-center rounded-full border-2 text-xs bg-transparent hover:bg-transparent hover:text-white'
                        >
                            <span className={cn('flex h-6 w-6 items-center justify-center rounded-full')}>
                                <Paintbrush className=' h-4 w-4' />
                            </span>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent align='center' className='z-40 w-[340px] rounded-[0.5rem]  p-6 dark:bg-zinc-950'>
                        <Customizer />
                    </PopoverContent>
                </Popover>
            </div>
        </div>
    );
});

const Customizer = observer(() => {
    const [mounted, setMounted] = React.useState(false);

    React.useEffect(() => {
        setMounted(true);
    }, []);

    return (
        <ThemeWrapper defaultTheme='zinc' className='flex flex-col space-y-4 md:space-y-6'>
            <div className='flex items-start pt-4 md:pt-0'>
                <div className='space-y-1 pr-2'>
                    <div className='font-semibold leading-none tracking-tight'>Customize</div>
                    <div className='text-xs text-muted-foreground'>Pick a style and color for your components.</div>
                </div>
                <Button
                    variant='ghost'
                    size='icon'
                    className='ml-auto rounded-[0.5rem]'
                    onClick={() => {
                        appStore.setConfig({
                            ...appStore.config,
                            theme: 'zinc',
                            radius: 0.5,
                        });
                    }}
                >
                    <ResetIcon />
                    <span className='sr-only'>Reset</span>
                </Button>
            </div>
            <div className='flex flex-1 flex-col space-y-4 md:space-y-6'>
                <div className='space-y-1.5'>
                    <Label className='text-xs'>Color</Label>
                    <div className='grid grid-cols-3 gap-2'>
                        {themes.map((theme: any) => {
                            const isActive = appStore.config.theme === theme.name;

                            return mounted ? (
                                <Button
                                    variant='outline'
                                    size='sm'
                                    key={theme.name}
                                    onClick={() => {
                                        appStore.setConfig({
                                            ...appStore.config,
                                            theme: theme.name,
                                        });
                                    }}
                                    className={cn('justify-start', isActive && 'border-2 border-primary')}
                                    style={
                                        {
                                            '--theme-primary': `hsl(${theme?.activeColor[appStore.mode === 'dark' ? 'dark' : 'light']})`,
                                        } as React.CSSProperties
                                    }
                                >
                                    <span
                                        className={cn(
                                            'mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]',
                                        )}
                                    >
                                        {isActive && <CheckIcon className='h-4 w-4 text-white' />}
                                    </span>
                                    {theme.label}
                                </Button>
                            ) : (
                                <Skeleton className='h-8 w-full' key={theme.name} />
                            );
                        })}
                    </div>
                </div>
                <div className='space-y-1.5'>
                    <Label className='text-xs'>Radius</Label>
                    <div className='grid grid-cols-5 gap-2'>
                        {['0', '0.3', '0.5', '0.75', '1.0'].map((value) => {
                            return (
                                <Button
                                    variant='outline'
                                    size='sm'
                                    key={value}
                                    onClick={() => {
                                        appStore.setConfig({
                                            ...appStore.config,
                                            radius: parseFloat(value),
                                        });
                                    }}
                                    className={cn(
                                        appStore.config.radius === parseFloat(value) && 'border-2 border-primary',
                                    )}
                                >
                                    {value}
                                </Button>
                            );
                        })}
                    </div>
                </div>
                <div className='space-y-1.5'>
                    <Label className='text-xs'>Mode</Label>
                    <div className='grid grid-cols-3 gap-2'>
                        {mounted ? (
                            <>
                                <Button
                                    variant='outline'
                                    size='sm'
                                    onClick={() => {
                                        if (appStore.mode !== 'light') {
                                            document.documentElement.classList.remove('dark');
                                            appStore.setMode('light');
                                        }
                                    }}
                                    className={cn(appStore.mode === 'light' && 'border-2 border-primary')}
                                >
                                    <SunIcon className='mr-1 -translate-x-1' />
                                    Light
                                </Button>
                                <Button
                                    variant='outline'
                                    size='sm'
                                    onClick={() => {
                                        appStore.setMode('dark');
                                    }}
                                    className={cn(appStore.mode === 'dark' && 'border-2 border-primary')}
                                >
                                    <MoonIcon className='mr-1 -translate-x-1' />
                                    Dark
                                </Button>
                                <Button
                                    variant='outline'
                                    size='sm'
                                    onClick={() => {
                                        appStore.setMode('system');
                                    }}
                                    className={cn(appStore.mode === 'system' && 'border-2 border-primary')}
                                >
                                    <MoonIcon className='mr-1 -translate-x-1' />
                                    System
                                </Button>
                            </>
                        ) : (
                            <>
                                <Skeleton className='h-8 w-full' />
                                <Skeleton className='h-8 w-full' />
                            </>
                        )}
                    </div>
                </div>
            </div>
        </ThemeWrapper>
    );
});
